<template>
  <view class="sendCoupons">
    <view class="header">
      <view class="title">
        第一步：创建福利 
      </view>
      <view 
        class="li" 
        @click="openPopup"
      >
        <view class="li_left">
          <view class="top">
            <text class="tags">
              * 
            </text>
            <text class="content"> 
              福利类型 
            </text>
          </view>
          <view 
            :class="{active : item.txt}" 
            class="down"
          >
            {{ item.txt || '请选择' }}
          </view>
        </view>
        <view class="li_right">
          <img
            class="next"
            src="https://lishiots.oss-cn-hangzhou.aliyuncs.com/webstatic/outing-fun/personal/next.png"
          >
        </view>
      </view>
      <view 
        class="li"
        @click="checkUser(0)"
      >
        <view class="li_left">
          <view class="top">
            <text class="tags">
              * 
            </text>
            <text class="content">
              发放人员 
            </text>
          </view>
          <view class="down">
            请选择 
          </view>
        </view>
        <view class="li_right">
          <block v-if="sendList.length>2">
            <view 
              class="avatar"
              @click.stop=""
            >
              <view 
                class="imgs"
                @click="jumpUrl(0)"
              >
                <image 
                  class="photo"
                  src="https://lishiots.oss-cn-hangzhou.aliyuncs.com/webstatic/outing-fun/personal/allUser.png" 
                  mode="widthFix"
                />
                <text class="name">
                  查看全部
                </text>
              </view>
              <text class="f">
                +
              </text>
            </view>
          </block>
          <view 
            v-for="(val,idx) in sendListTxt"
            :key="idx"
            class="avatar"
            @click.stop=""
          >
            <block>
              <view class="imgs">
                <view class="i_box">
                  <image 
                    v-if="val.avatar"
                    class="photo"
                    :src="val.avatar" 
                    mode="widthFix"
                  />
                  <view 
                    v-else
                    class="bg"
                  >
                    {{ val.name.slice(-2) }}
                  </view>
                  <image 
                    class="btnImg"
                    src="https://lishiots.oss-cn-hangzhou.aliyuncs.com/webstatic/outing-fun/personal/del1.png" 
                    mode="widthFix"
                    @click="del(0,idx)"
                  />
                </view>
                <text class="name">
                  {{ val.name }}
                </text>
              </view>
              <text class="f">
                +
              </text>
            </block>
          </view>
          <img
            class="check"
            src="https://lishiots.oss-cn-hangzhou.aliyuncs.com/webstatic/outing-fun/personal/check.png"
          >
        </view>
      </view>
      <!-- <view 
        class="li"
        @click="checkUser(0)"
      >
        <view class="li_left">
          <view class="top">
            <text class="tags">
              * 
            </text>
            <text class="content">
              发放人员
            </text>
          </view>
          <view 
            v-if="!sendList.length"
            class="down"
          > 
            请选择
          </view>
          <view 
            v-else 
            class="sendAll"
            @click.stop=""
          >
            <text
              v-for="(val,idx) in sendListTxt"
              :key="idx"
            >
              <block v-if="idx<3">
                {{ val.name }}{{ (idx ==sendListTxt.length-1) ? '' : '、' }}
              </block>
            </text>
            <text v-if="sendList.length>3">
              等 {{ sendList.length }} 人
            </text>
            <image 
              class="del" 
              src="https://lishiots.oss-cn-hangzhou.aliyuncs.com/webstatic/outing-fun/personal/del1.png" 
              mode="widthFix"
              @click="del(0,idx)"
            />
          </view>
        </view>
        <view class="li_right">
          <img
            class="check"
            src="https://lishiots.oss-cn-hangzhou.aliyuncs.com/webstatic/outing-fun/personal/check1.png"
            mode="widthFix"
          >
        </view>
      </view> -->
      <view 
        class="li"
        style="align-items: center;"
      >
        <view 
          class="li_left"
          style="line-height:40rpx;height:40rpx;"
        >
          <view class="top">
            <text class="tags">
              *
            </text>
            <text class="content">
              每人发放数量：
            </text>
          </view>
        </view>
        <view class="li_right">
          <view class="number_box">
            <uni-number-box1
              :min="0"
              :max="maxCouponNum"
              :disabled="!maxCouponNum"
              :value="number"
              :max-length="maxCouponNum.length"
              @change="changeNumber"
            />
          </view>
        </view>
      </view>
    </view>
    <view class="hr" />
    <view class="center">
      <view class="title"> 
        第二步：审批 
      </view>
      <view 
        class="li"
        @click="checkUser(1)"
      >
        <view class="li_left">
          <view class="top">
            <text class="tags">
              * 
            </text>
            <text class="content"> 
              审批人 
            </text>
          </view>
          <view 
            class="down"
          >
            请选择 
          </view>
        </view>
        <view class="li_right">
          <view 
            v-for="(val,idx) in sList"
            :key="idx"
            class="avatar"
            @click.stop=""
          >
            <view class="imgs">
              <view class="i_box">
                <image 
                  v-if="val.avatar"
                  class="photo"
                  :src="val.avatar" 
                  mode="widthFix"
                />
                <view 
                  v-else
                  class="bg"
                >
                  {{ val.name.slice(-2) }}
                </view>
                <image 
                  class="btnImg"
                  src="https://lishiots.oss-cn-hangzhou.aliyuncs.com/webstatic/outing-fun/personal/del1.png" 
                  mode="widthFix"
                  @click="del(1,idx)"
                />
              </view>
              <text class="name">
                {{ val.name }}
              </text>
            </view>
            <text class="f">
              +
            </text>
          </view>
          <img
            class="check"
            src="https://lishiots.oss-cn-hangzhou.aliyuncs.com/webstatic/outing-fun/personal/check.png"
          >
        </view>
      </view>
      <view 
        class="li"
        @click="checkUser(2)"
      >
        <view class="li_left">
          <view class="top">
            <text class="content">
              抄送人 
            </text>
          </view>
          <view class="down">
            请选择 
          </view>
        </view>
        <view class="li_right">
          <block v-if="cList.length>2">
            <view 
              class="avatar"
              @click.stop=""
            >
              <view 
                class="imgs"
                @click="jumpUrl(1)"
              >
                <image 
                  class="photo"
                  src="https://lishiots.oss-cn-hangzhou.aliyuncs.com/webstatic/outing-fun/personal/allUser.png" 
                  mode="widthFix"
                />
                <text class="name">
                  查看全部
                </text>
              </view>
              <text class="f">
                +
              </text>
            </view>
          </block>
          <view 
            v-for="(val,idx) in cListimg"
            :key="idx"
            class="avatar"
            @click.stop=""
          >
            <block>
              <view class="imgs">
                <view class="i_box">
                  <image 
                    v-if="val.avatar"
                    class="photo"
                    :src="val.avatar" 
                    mode="widthFix"
                  />
                  <view 
                    v-else
                    class="bg"
                  >
                    {{ val.name.slice(-2) }}
                  </view>
                  <image 
                    class="btnImg"
                    src="https://lishiots.oss-cn-hangzhou.aliyuncs.com/webstatic/outing-fun/personal/del1.png" 
                    mode="widthFix"
                    @click="del(2,idx)"
                  />
                </view>
                <text class="name">
                  {{ val.name }}
                </text>
              </view>
              <text class="f">
                +
              </text>
            </block>
          </view>
          <img
            class="check"
            src="https://lishiots.oss-cn-hangzhou.aliyuncs.com/webstatic/outing-fun/personal/check.png"
          >
        </view>
      </view>
      <!-- <view class="li">
        <view class="li_left">
          <view class="top">
            <text 
              class="content"
              style="line-height: 50rpx"
            >
              通过聊天发送给审批人 
            </text>
          </view>
        </view>
        <view class="right">
          <view class="switch-item">
            <switch 
              checked 
              color="#FAE14D"
              @change="switchChange" 
            />
          </view>
        </view>
      </view> -->
    </view>
    <view style="height: 120rpx" />
    <view 
      v-if="isIpx" 
      class="iphoneX_bottom"
    />
    <view class="footer">
      <view 
        class="top" 
        @click="submit"
      >
        <text class="btn"> 
          提交 
        </text>
      </view>
      <view 
        v-if="isIpx" 
        class="iphoneX_bottom" 
      />
    </view>
    <u-picker 
      ref="popup" 
      :list="checkList" 
      @onSubmit="onSubmit"
    />
  </view>
</template>

<script>
import uPicker from '@/components/public/picker1'
export default {
  components: { uPicker },
  data() {
    return {
      maxCouponNum: 0,
      number: 0,
      allNumber: 99,
      sendList: [],
      sendListTxt: [],
      sendMessage:true,
      sList: [],
      cList: [],
      cListimg:[],
      checkList: [{txt:"生日福利"},{txt:"节日福利"},{txt:"员工激励"},{txt:"加班补贴"},{txt:"其他"}],
      isIpx: this.$isIphoneX,
      item: {
        txt:""
      }
    }
  },
  onLoad(options) {
    console.log(options)
    this.pageInit()
  },
  watch: {
    'sendList': 'validate'
  },
  methods: {
    //提交
    submit() {
      let msg = "", sendList = this.sendList, auditUsers = [], copyUsers = []
      if(!this.sList.length) {
        // eslint-disable-next-line no-unused-vars
        msg = '审批人'
      }
      if(!this.number || this.number === 0 || this.number>this.maxCouponNum) {
        msg = "每人发放数量"
      }
      if(!this.sendList.length) {
        msg = "发放人员"
      }
      if(!this.item.txt) {
        msg = "福利类型"
      }
      if(msg){
        this.$toast(msg + '为空或有误')
        return
      }
      uni.showLoading()
      for(let i in sendList){
        sendList[i]['number']=this.number
      }
      for(let j in this.sList){
        auditUsers.push(this.sList[j].userid || this.sList[j].userId)
      }
      for(let k in this.cList){
        copyUsers.push(this.cList[k].userid || this.cList[k].userId)
      }
      this.$ajax({
        method: 'post',
        url: '/outing/mobile/grant/add',
				header: "application/json;charset=UTF-8",
        data: {
          auditUsers,
          category: this.item.txt,
          copyUsers,
          details: sendList,
          sendMessage: this.sendMessage
        }
      }).then((res) => {
        uni.hideLoading()
        this.$toast(res.message)
        if(res.code === 8200){
          let timer=setTimeout(() => {
            uni.navigateBack()
          }, 2000);
        }
        console.log(res)
      })

    },
    //确认
    onSubmit(item){
      this.item = item 
    },
    openPopup() {
      this.$refs.popup.open()
    },
    switchChange(e) {
      this.sendMessage = e.detail.value
      console.log(e)
    },
    pageInit() {
      this.$ajax({
        method: 'get',
        url: '/outing/mobile/grant/number'
      }).then((res) => {
        if(res.data){
          this.allNumber = res.data.couponNumber
        }
        console.log(res)
      })
    },
    changeNumber(number) {
      this.number = number
    },
    //填写最大可赠送数量
    validate(){
      this.number=0
      this.maxCouponNum = Math.floor(this.allNumber/this.sendList.length)
    },
    checkUser(type) {
      let title = '', that = this, maxUsers = 50
      if (type === 0) {
        title = '选择发放人员'
      } else if (type === 1) {
        title = '选择审批人'
        maxUsers = 2
      } else if (type === 2) {
        // eslint-disable-next-line no-unused-vars
        title = '选择抄送人'
      }
      dd.complexChoose({
        title, //标题
        multiple: true, //是否多选
        limitTips: '最大可选人数'+ maxUsers +'人', //超过限定人数返回提示
        maxUsers, //最大可选人数
        pickedUsers: [], //已选用户，值为userId列表
        disabledUsers: [], //不可选用户，值为userId列表
        disabledDepartments: [], //不可选部门id
        requiredUsers: [], //必选用户（不可取消选中状态）
        requiredDepartments: [], //必选部门（不可取消选中状态）
        permissionType: 'GLOBAL', //可添加权限校验，选人权限，目前只有GLOBAL这个参数
        responseUserOnly: false, //返回人，或者返回人和部门
        success: function (res) {
          console.log(res)
          if(res.users.length){
            for(let i in res.users){
              res.users[i]['userid'] = res.users[i]['userId']
            }
          }
          that.getUserList(res,type)
        },
        fail: function (err) {},
      })
    },
    getUserList(data,type) {
      let departId = [];
      if(data.departments.length){
        uni.showLoading()
        for(let i in data.departments){
          departId.push(data.departments[i].id)
        }
        console.log(departId)
        this.$ajax({
          method: 'post',
          url: '/outing/mobile/exchange/queryByDepartId',
					header: "application/json;charset=UTF-8",
          data: {
            departId
          }
        }).then((res) => {
          if(res.data){
            let list = res.data
						console.log(list,data)
            list = list.concat(data.users)
						console.log(list)
            // eslint-disable-next-line no-undef
            if(type === 0){
              this.sendList = list
              if(list.length>2){
                this.sendListTxt = list.slice(0,1)
              }else{
                this.sendListTxt = list
              }
            }else if( type === 1){
              this.sList = list
            }else if( type === 2){
              this.cList = list
              if(list.length>2){
                this.cListimg=list.slice(0,1)
              }else{
                this.cListimg=list
              }
            }
          }
          uni.hideLoading()
        })
      }else{
        // eslint-disable-next-line no-undef
        if(type === 0){
          this.sendList = data.users
          if(data.users.length>2){
            this.sendListTxt = data.users.slice(0,1)
          }else{
            this.sendListTxt = data.users
          }
        }else if( type === 1){
          this.sList = data.users
        }else if( type === 2){
          this.cList = data.users
          if(data.users.length>2){
            this.cListimg = data.users.slice(0,1)
          }else{
            this.cListimg = data.users
          }
        }
      }
    },
    del(type,index){
      if(type===0){
        this.sendList.splice(index,1)
        if(this.sendList.length>2){
          this.sendListTxt = this.sendList.slice(0,1)
        }else{
          this.sendListTxt = this.sendList
        }
      }else if(type===1){
        this.sList.splice(index,1)
      }else if(type===2){
        this.cList.splice(index,1)
        if(this.cList.length>2){
          this.cListimg = this.cList.slice(0,1)
        }else{
          this.cListimg = this.cList
        }
        
      }
    },
    jumpUrl(type) {
      if(type === 0){
        this.$store.commit('changeCList',this.sendList)
      }else if( type===1 ){
        this.$store.commit('changeCList',this.cList)
      }
      // this.$store.commit('changeCListimg',this.cListimg)
      this.$jumpUrl('/subPages/sendCoupons/lookUsers')
    }
  },
}
</script>
<style lang="less" scoped>
.sendCoupons{
  background-color: #f7f9fb;
  min-height: 100vh;
}
.footer {
  background-color: #fff;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  .top {
    width: 100%;
    height: 120rpx;
    line-height: 120rpx;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .btn {
      width: 590rpx;
      height: 82rpx;
      border-radius: 8rpx;
      text-align: center;
      line-height: 82rpx;
      color: #222;
      background-color: #FAE14D;
      margin: 0 auto;
      border-radius: 41rpx;
      font-size: 34rpx;
    }
  }
}
.hr {
  background-color: #f7f9fb;
  height: 20rpx;
}
.header,
.center {
  background-color: #fff;
  width: 100%;
  font-size: 32rpx;
  .title {
    text-align: center;
    margin: 0 auto;
    padding: 26rpx;
  }
  .li {
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    padding: 30rpx;
    border-bottom: 1px solid #e8e8e8;
    .li_left {
      .active{
        color: #000 !important;
      }
      .top {
        font-size: 30rpx;
        margin-bottom: 30rpx;
        .tags {
          color: #ff4d00;
          margin-right: 14rpx;
        }
        .number_box {
          margin-top: 25rpx;
        }
      }
      .down {
        font-size: 28rpx;
        color: #666666;
        line-height: 26rpx;
        padding-left: 28rpx;
      }
      .sendAll{
        display: flex;
        align-items: center;
        font-size: 30rpx;
        .del{
          width: 33rpx;
          height: 33rpx;
          margin-left: 18rpx;
        }
      }
    }
    .li_right {
      position: relative;
      display: flex;
      align-items: center;
      img {
        align-items: center;
        display: block;
      }
      .avatar{
        display: flex;
        position: relative;
        align-items: center;
        color: #333;
        font-size: 20rpx;
        text-align: center;
        justify-content: center;
        .imgs{
          text-align: center;
        }
        .i_box{
          margin: 0 auto;
          position: relative;
        }
        .name{
					display: block;
					margin-top: 9rpx;
        }
        .bg{
          background-color: #FAE14D;
          width: 60rpx;
          height: 60rpx;
          line-height: 60rpx;
          text-align: center;
          font-size: 20rpx;
          color: #333;
          margin: 0 auto;
					border-radius: 8rpx;
        }
        .photo{
          width: 60rpx;
          height: 60rpx;
          border-radius: 8rpx;
          display: block;
          margin: 0 auto;
        }
        .btnImg{
          width: 25rpx;
          height: 25rpx;
          position: absolute;
          top: -18rpx;
          left: 70%;
          padding: 10rpx;
        }
        .f{
          color: #999999;
          margin: 0 17rpx;
        }
      }
      .next {
        width: 18rpx;
        height: 33rpx;
      }
      .check {
        width: 62rpx;
        height: 62rpx;
      }
    }
  }
  .li:last-child {
    border: none;
  }
}
</style>